<template>
  <div class="phone-messages-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <h2><el-icon><Iphone /></el-icon> 手机信息</h2>
      <div class="header-actions">
        <el-input
            v-model="searchQuery"
            placeholder="搜索通话/短信"
            clearable
            style="width: 200px"
            @clear="handleSearchClear"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <!-- 选项卡切换 -->
    <el-tabs v-model="activeTab" class="message-tabs">
      <el-tab-pane label="通话记录" name="calls">
        <div class="call-list">
          <div v-if="callRecords.length === 0" class="empty-state">
            <el-empty description="暂无通话记录" />
          </div>
          <div
              v-for="record in filteredCallRecords"
              :key="record.id"
              class="call-item"
              :class="{ 'missed-call': record.type === 'missed' }"
          >
            <div class="call-avatar">
              <el-avatar :src="record.avatar || defaultAvatar" />
            </div>
            <div class="call-info">
              <div class="call-header">
                <span class="call-name">{{ record.name || record.phone }}</span>
                <span class="call-time">{{ formatTime(record.time) }}</span>
              </div>
              <div class="call-details">
                <span class="call-type">
                  <el-icon :class="getCallTypeIcon(record.type)">
                    <component :is="getCallTypeIcon(record.type)" />
                  </el-icon>
                  {{ getCallTypeText(record.type) }}
                </span>
                <span class="call-duration">{{ record.duration || '' }}</span>
              </div>
            </div>
            <div class="call-actions">
              <el-button type="text" @click="handleCallBack(record.phone)">
                <el-icon><Phone /></el-icon> 回拨
              </el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="短信" name="messages">
        <div class="sms-list">
          <div v-if="smsMessages.length === 0" class="empty-state">
            <el-empty description="暂无短信" />
          </div>
          <div
              v-for="message in filteredSmsMessages"
              :key="message.id"
              class="sms-item"
              :class="{ 'unread-sms': !message.read }"
          >
            <div class="sms-avatar">
              <el-avatar :src="message.avatar || defaultAvatar" />
            </div>
            <div class="sms-info">
              <div class="sms-header">
                <span class="sms-name">{{ message.name || message.phone }}</span>
                <span class="sms-time">{{ formatTime(message.time) }}</span>
              </div>
              <div class="sms-content">
                {{ message.content }}
              </div>
            </div>
            <div class="sms-actions">
              <el-button type="text" @click="handleReply(message.phone)">
                <el-icon><ChatDotRound /></el-icon> 回复
              </el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 拨号弹窗 -->
    <el-dialog
        v-model="dialDialogVisible"
        title="拨打电话"
        width="30%"
        center
    >
      <div class="dial-dialog-content">
        <p>即将拨打: {{ dialNumber }}</p>
      </div>
      <template #footer>
        <el-button @click="dialDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDial">确认拨打</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  Iphone,
  Phone,
  Search,
  ChatDotRound,
  ArrowUp,
  ArrowDown,
  Close
} from '@element-plus/icons-vue'
import {format} from 'date-fns'
import {ElMessage} from 'element-plus'

// 导入默认头像
import defaultAvatar from '../assets/user.jpg'
import doctorAvatar from '../assets/doctor-avatar.svg'
import hospitalAvatar from '../assets/hospital-avatar.svg'
import nurseAvatar from '../assets/nurse-avatar.svg'

// 状态管理
const activeTab = ref('calls')
const searchQuery = ref('')
const dialDialogVisible = ref(false)
const dialNumber = ref('')

// 模拟数据
const callRecords = ref([
  {
    id: 1,
    name: '张医生',
    phone: '13800138000',
    type: 'incoming',
    time: new Date('2023-05-20 10:30'),
    duration: '2:30',
    avatar: doctorAvatar
  },
  {
    id: 2,
    phone: '13900139000',
    type: 'missed',
    time: new Date('2023-05-20 09:15'),
    avatar: hospitalAvatar
  },
  {
    id: 3,
    name: '李护士',
    phone: '13700137000',
    type: 'outgoing',
    time: new Date('2023-05-19 16:45'),
    duration: '5:12',
    avatar: nurseAvatar
  }
])

const smsMessages = ref([
  {
    id: 1,
    name: '医院通知',
    phone: '10690000',
    content: '您的预约已确认，请于5月22日10:00准时就诊',
    time: new Date('2023-05-20 08:30'),
    read: true,
    avatar: hospitalAvatar
  },
  {
    id: 2,
    phone: '13800138000',
    content: '检查报告已出，请登录系统查看',
    time: new Date('2023-05-19 14:15'),
    read: false,
    avatar: doctorAvatar
  }
])

// 计算属性
const filteredCallRecords = computed(() => {
  if (!searchQuery.value) return callRecords.value
  return callRecords.value.filter(record =>
      (record.name && record.name.includes(searchQuery.value)) ||
      record.phone.includes(searchQuery.value)
  )
})

const filteredSmsMessages = computed(() => {
  if (!searchQuery.value) return smsMessages.value
  return smsMessages.value.filter(message =>
      (message.name && message.name.includes(searchQuery.value)) ||
      message.phone.includes(searchQuery.value) ||
      message.content.includes(searchQuery.value)
  )
})

// 方法
const formatTime = (date) => {
  return format(date, 'MM/dd HH:mm')
}

const getCallTypeIcon = (type) => {
  const icons = {
    incoming: ArrowDown,
    outgoing: ArrowUp,
    missed: Close
  }
  return icons[type] || Phone
}

const getCallTypeText = (type) => {
  const texts = {
    incoming: '来电',
    outgoing: '去电',
    missed: '未接'
  }
  return texts[type] || '通话'
}

const handleCallBack = (phone) => {
  dialNumber.value = phone
  dialDialogVisible.value = true
}

const handleReply = (phone) => {
  dialNumber.value = phone
  dialDialogVisible.value = true
}

const confirmDial = () => {
  // 这里实际应该调用电话API
  console.log('拨打:', dialNumber.value)
  dialDialogVisible.value = false
  ElMessage.success(`正在拨打 ${dialNumber.value}`)
}

const handleSearchClear = () => {
  searchQuery.value = ''
}
</script>

<style scoped>
.phone-messages-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #ebeef5;
}

.message-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.call-list,
.sms-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
}

.call-item,
.sms-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
}

.call-item.missed-call {
  background-color: #fff6f6;
}

.sms-item.unread-sms {
  background-color: #f5f9ff;
}

.call-avatar,
.sms-avatar {
  margin-right: 12px;
}

.call-info,
.sms-info {
  flex: 1;
  min-width: 0;
}

.call-header,
.sms-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.call-name,
.sms-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-time,
.sms-time {
  color: #909399;
  font-size: 12px;
}

.call-details {
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 12px;
}

.call-type {
  display: flex;
  align-items: center;
}

.call-type .el-icon {
  margin-right: 4px;
}

.sms-content {
  color: #606266;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-actions,
.sms-actions {
  margin-left: 12px;
}

.empty-state {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dial-dialog-content {
  text-align: center;
  font-size: 18px;
  padding: 20px 0;
}

/* 滚动条样式 */
.call-list::-webkit-scrollbar,
.sms-list::-webkit-scrollbar {
  width: 6px;
}

.call-list::-webkit-scrollbar-thumb,
.sms-list::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}
</style>
